<template>
  <div class="app-container">
    <div>
      <BasicBusiness ref="basicBusinessRef" />
    </div>
    <div style="padding: 50px">
      <Step ref="stepRef" />
    </div>
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="mini"
      label-width="150px"
    >
      <el-form-item label="验收时间" prop="acceptanceTime">
        <el-date-picker
          v-model="formData.acceptanceTime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '100%' }"
          placeholder="请选择验收时间"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="计划交付进度" prop="planDeliverySchedule">
        <el-input
          v-model="formData.planDeliverySchedule"
          placeholder="请输入计划交付进度"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="实际交付进度" prop="actualDeliverySchedule">
        <el-input
          v-model="formData.actualDeliverySchedule"
          placeholder="请输入实际交付进度"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="实际竣工交付时间" prop="actualDeliveryTime">
        <el-date-picker
          v-model="formData.actualDeliveryTime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '100%' }"
          placeholder="请选择实际竣工交付时间"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="竣工验收时间" prop="arrivalTime">
        <el-date-picker
          v-model="formData.arrivalTime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :style="{ width: '100%' }"
          placeholder="请选择竣工验收时间"
          clearable
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        label="后向供应商验收报告"
        prop="downAcceptanceFileId"
        required
      >
        <el-upload
          ref="downAcceptanceFileId"
          :file-list="downAcceptanceFileIdfileList"
          :action="downAcceptanceFileIdAction"
          :before-upload="downAcceptanceFileIdBeforeUpload"
          :on-success="handleDownUploadSuccess"
          :on-remove="handleDownRemove"
          :headers="headers"
          :limit="1"
        >
          <el-button size="small" type="primary" icon="el-icon-upload"
            >点击上传</el-button
          >
        </el-upload>
      </el-form-item>
      <el-form-item label="前向客户验收报告" prop="upAcceptanceFileId" required>
        <el-upload
          ref="upAcceptanceFileId"
          :file-list="upAcceptanceFileIdfileList"
          :action="upAcceptanceFileIdAction"
          :before-upload="upAcceptanceFileIdBeforeUpload"
          :on-success="handleUpUploadSuccess"
          :on-remove="handleUpRemove"
          :headers="headers"
          :limit="1"
        >
          <el-button size="small" type="primary" icon="el-icon-upload"
            >点击上传</el-button
          >
        </el-upload>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import BasicBusiness from "@/views/components/business/BasicBusiness.vue";
import Step from "@/views/components/business/Step.vue";
import { getToken } from "@/utils/auth";
import { getProjectDetail, deliveryImplement } from "@/api/project/index";
export default {
  components: { BasicBusiness, Step },
  props: [],
  data() {
    return {
      formData: {
        acceptanceTime: null,
        planDeliverySchedule: undefined,
        actualDeliverySchedule: undefined,
        actualDeliveryTime: null,
        arrivalTime: null,
        downAcceptanceFileId: null,
        upAcceptanceFileId: null,
      },
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      rules: {
        acceptanceTime: [
          {
            required: true,
            message: "请选择验收时间",
            trigger: "change",
          },
        ],
        planDeliverySchedule: [
          {
            required: true,
            message: "请输入计划交付进度",
            trigger: "blur",
          },
        ],
        actualDeliverySchedule: [
          {
            required: true,
            message: "请输入实际交付进度",
            trigger: "blur",
          },
        ],
        actualDeliveryTime: [
          {
            required: true,
            message: "请选择实际竣工交付时间",
            trigger: "change",
          },
        ],
        arrivalTime: [
          {
            required: true,
            message: "请选择竣工验收时间",
            trigger: "change",
          },
        ],
        upAcceptanceFileId: [
          {
            required: true,
            message: "请上传前向客户验收报告",
            trigger: "change",
          },
        ],
        downAcceptanceFileId: [
          {
            required: true,
            message: "请上传后向客户验收报告",
            trigger: "change",
          },
        ]
      },
      downAcceptanceFileIdAction:
        "http://business.byteturing.com" +
        process.env.VUE_APP_BASE_API +
        "/common/upload",
      downAcceptanceFileIdfileList: [],
      upAcceptanceFileIdAction:
        "http://business.byteturing.com" +
        process.env.VUE_APP_BASE_API +
        "/common/upload",
      upAcceptanceFileIdfileList: [],
    };
  },
  computed: {
    boId() {
      return this.$route.query.boId;
    },
    projectId() {
      return this.$route.query.projectId;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.basicBusinessRef.loadData(this.boId).then((res) => {});

      getProjectDetail(this.boId).then((res) => {
        ;
        this.stage = res.data.stage;
        this.$refs.stepRef.setStage(this.stage);
      });
    },
    submitForm() {
      console.log(this.formData);
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        deliveryImplement({
          ...this.formData,
          boId: this.boId,
          projectId: this.projectId,
        }).then((res) => {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.$router.replace("/implement/index");
        });
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    downAcceptanceFileIdBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 100;
      if (!isRightSize) {
        this.$message.error("文件大小超过 100MB");
      }
      return isRightSize;
    },
    upAcceptanceFileIdBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 100;
      if (!isRightSize) {
        this.$message.error("文件大小超过 100MB");
      }
      return isRightSize;
    },
    handleDownUploadSuccess(res) {
      this.formData.downAcceptanceFileId = res.fileId;
    },
    handleUpUploadSuccess(res) {
      this.formData.upAcceptanceFileId = res.fileId;
    },
    handleDownRemove() {
      this.formData.downAcceptanceFileId = "";
    },
    handleUpRemove() {
      this.formData.upAcceptanceFileId = "";
    },
  },
};
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
